<template>
  <div class="x-table">
    <div class="filter-container">
      <slot name="top"></slot>
      <el-button
        v-if="multipleSelection !== null && multipleSelection.length && del"
        type="danger"
        icon="el-icon-delete"
        style="margin-left: 10px; width: 120px; height: 36px"
        @click="handleDEL"
        >批量删除</el-button
      >
    </div>

    <el-table
      v-bind="$attrs"
      :data="list"
      v-if="list"
      v-loading="loading"
      border
      fit
      highlight-current-row
      style="width: 100%"
      @selection-change="selectTable"
      :header-cell-style="{ background: '#EDF4FC', color: '#1A45B8', fontWeight: 'bold' }"
    >
      >
      <el-table-column type="selection" width="55" v-if="del && api"> </el-table-column>
      <el-table-column v-for="(item, i) in tableCol" :key="i" :label="item.label" min-width="110px" align="center">
        <template #default="{ row }">
          <!-- 当有图片时 -->
          <div v-if="item.img" class="commentImg">
            <el-image style="width: 100%;  height: 100%" :src="row[item.key]" :preview-src-list="[row[item.key]]" />
          </div>
          <!-- 当有判断条件时 -->
          <div v-else-if="item.switch">
            <div v-for="item2 in item.switch" :key="item2.value">
              <span v-if="row[item.key] == item2.case">{{ item2.value }}</span>
            </div>
          </div>
          <!-- 插槽 -->
          <div v-else-if="item.slot">
            <slot :name="item.slot" :row="row"></slot>
          </div>
          <!-- 直接显示 -->
          <span v-else>{{ row[item.key] }}</span>
        </template>
      </el-table-column>

      <el-table-column v-if="cao" align="center" width="300">
        <template #header> 操作 </template>
        <template #default="{ row }">
          <div class="cao">
            <slot name="cao" :row="row"></slot>
            <!-- 删除-->
            <!-- v-if="del && api" -->
            <span class="del" @click="handleDelete(row.id, row.id)">删除</span>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <!-- <pagination
      v-show="page.total > 0"
      :total="page.total"
      :page.sync="page.pageIndex"
      :limit.sync="page.pageSize"
      @pagination="onPage"
    /> -->
  </div>
</template>

<script>
// import Pagination from '@/components/ele/Pagination.vue'
export default {
  name: 'x-table',
  // components: { Pagination },
  props: {
    api: {
      type: Object,
      default: null
    }, //请求api对象
    page: {
      type: Object,
      default: () => ({
        pageIndex: 1,
        pageSize: 10,
        total: 20
      })
    },
    form: {
      type: Object,
      default: () => ({
        pageIndex: 10,
        pageSize: 1
      })
    },
    tableCol: Array, //表格所需属性
    del: {
      //是否可删除
      type: Boolean,
      default: true
    },
    tableData: {
      type: Array,
      default() {
        return []
      }
    },
    cao: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      list: null,
      loading: true,
      multipleSelection: null
    }
  },
  created() {
    console.log(this.$attrs)
    if (this.api) {
      this.getList()
    } else {
      this.list = this.tableData
      this.loading = false
    }
  },
  methods: {
    getList() {
      this.loading = true
      this.api.getPageList(this.form).then((response) => {
        this.data = response.data.records.map((item) => this.flatten(item))
        this.page.total = response.data.total
        this.loading = false
      })
    },
    // 翻页
    onPage({ page, limit }) {
      this.$emit('onPage', { pageSize: limit, pageCurrent: page })
    },
    // 对象扁平化
    flatten(obj) {
      let result = {}
      let process = (key, value) => {
        // 首先判断是基础数据类型还是引用数据类型
        if (Object(value) !== value) {
          // 基础数据类型
          if (key) {
            result[key] = value
          }
        } else if (Array.isArray(value)) {
          for (let i = 0; i < value.length; i++) {
            process(`${key}[${i}]`, value[i])
          }
          if (value.length === 0) {
            result[key] = []
          }
        } else {
          let objArr = Object.keys(value)
          objArr.forEach((item) => {
            process(key ? `${key}.${item}` : `${item}`, value[item])
          })
          if (objArr.length === 0 && key) {
            result[key] = {}
          }
        }
      }
      process('', obj)
      return result
    },
    refresh() {
      this.getList()
    },
    // 选中表格时
    selectTable(val) {
      this.multipleSelection = val
    },
    //批量删除
    handleDEL() {
      this.$confirm('您确定要删除所有选中的数据?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.api.delBatch(this.multipleSelection.map((a) => a['id']).join(',')).then((response) => {
            if (response.code === 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getList()
            }
          })
        })
        .catch((err) => {})
    },
    // 删除数据
    handleDelete(id, name) {
      // this.$confirm('您确定要删除 ' + id + ' ?', '删除提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   this.api.del(id).then((response) => {
      //     if (response.code === 200) {
      //       this.$message({
      //         type: 'success',
      //         message: '删除成功!'
      //       })
      //       this.getList()
      //     }
      //   })
      // })
    }
  }
}
</script>

<style lang="less" scoped>
.x-table {
  position: relative;
  // 隔行换色
  /deep/.el-table__row:nth-child(2n) {
    background: #fafafa;
  }
  // 操作
  .cao {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    .del {
      color: #b8321a;
      cursor: pointer;
    }
  }
}
.x-page {
  position: absolute;
  right: 0;
  bottom: -50px;
}
.commentImg {
  display: flex;
  justify-content: space-evenly;
  .el-image {
    width: 60px;
  }
  .el-image-viewer__canvas {
    img {
      width: 500px;
    }
  }
}
.img-box {
  width: 51px;
  height: 51px;
  margin-right: 15px;
  img {
    width: 100%;
    height: 100%;
  }
}
.text-box {
  p {
    &:nth-child(1) {
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.65);
      margin-bottom: 8px;
    }
  }
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #595b5f;
  line-height: 22px;
}
</style>
